import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Home from "../views/Home.vue";
const SongList = ()=>import("../views/songInfo/songInfo.vue")
const SingerList = ()=>import("../views/singer/singer.vue")
const NewMusic = ()=>import("../views/newMusic/newMusic.vue")
const Album = ()=>import("../views/newMusic/prod/album/album.vue")
const routes: Array<RouteRecordRaw> = [
  {
    path:"/",
    redirect:"/home/advice"
  },
  {
    path: "/home/:id",
    name: "Home",
    component: Home,
    children:[
      {path:"/home/advice",name:"Advice",component:()=>import("../views/advice/advice.vue")},
      {path:"/home/song",name:"Song",component:()=>import("../views/songList/songList.vue")},
      {path:"/home/rank",name:"Rank",component:()=>import("../views/rank/rank.vue")},
      {path:"/home/singer",name:"Singer",component:SingerList},
      {path:"/home/singerInfo/:id",name:"SingerInfo",component:()=>import("../views/singerInfo/singerInfo.vue")},
      {path:"/home/playList/:id",name:"SongList",component:SongList},
      {path:"/home/newMusic",name:"NewMusic",component:NewMusic},
      {path:"/home/albumInfo/:id",name:"AlbumInfo",component:Album}
    ]
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;
